<template>
    <div>
        <button @click="addGraphic">添加graphic</button>
        <button @click="clearGraphic">清空graphic</button>
        <button @click="addModel">添加Modal</button>
        <button @click="clearModel">清空Modal</button>
    </div>
</template>

<script>
import * as Cesium from 'Cesium'

export default {
    props: ['bindMap'],
    methods: {
        addGraphic() {
            const ll = window.bindMap2D.map.getCenter()
            window.bindMap2D.HEGraphicPlugin.addGraphics([ll.lng, ll.lat], {
                type: 'circle',
                color: 'rgba(104, 229, 255, 0.5)',
                opacity: 1,
                radius: 100,
                fill: true,
                fillColor: 'rgba(104, 229, 255, 0.5)',
                fillOpacity: 1,
            })
        },

        clearGraphic() {
            window.bindMap2D.HEGraphicPlugin.removeGraphics()
        },

        addModel() {
            const ll = window.bindMap2D.map.getCenter()
            const point = [ll.lng, ll.lat, 100]

            window.bindMap3D.addGraphics(
                'Model',
                point,
                {
                    uri: './data/GroundVehicle.glb',
                    minimumPixelSize: 128,
                    maximumScale: 20000,
                },
                () => {
                    const position = Cesium.Cartesian3.fromDegrees(...point)
                    const heading = Cesium.Math.toRadians(135)
                    const pitch = 0
                    const roll = 0
                    const hpr = new Cesium.HeadingPitchRoll(
                        heading,
                        pitch,
                        roll
                    )
                    const orientation =
                        Cesium.Transforms.headingPitchRollQuaternion(
                            position,
                            hpr
                        )
                    return { orientation }
                }
            )
        },
        clearModel() {
            window.bindMap3D.removeAllGraphics()
        },
    },
}
</script>
